<!--  ERC-设备管理-设备台账页面-树形弹窗页面弹窗页面 -->
<template>
  <px-dialog v-model="TreedialogVisible" class="equip-dialog" :title="typeTitle" width="640px" @open="openDialog" @close="closeDialog">
    <px-form ref="formRef" :model="formValue" :rules="rules" label-position="right" label-width="120px">
      <px-form-item label="组件名称" prop="name">
        <px-input v-model="formValue.name" placeholder="请输入" maxlength="50" clearable />
      </px-form-item>
      <px-form-item label="是否子组件" prop="isChild">
        <px-select v-model="formValue.isChild" class="w-full" placeholder="请选择" maxlength="50">
          <px-option v-for="item in isChildList" :key="item.value" :label="item.label" :value="item.value" />
        </px-select>
      </px-form-item>
      <px-form-item v-if="formValue.isChild" label="所属父组件" prop="parentNo">
        <px-tree-select
          v-model="formValue.parentNo"
          class="w-full"
          value-key="componentNo"
          :props="{ children: 'children', label: 'name', value: 'componentNo' }"
          :data="filterTreeData"
          check-strictly
          :render-after-expand="false"
        />
      </px-form-item>
      <px-form-item label="组件类型" prop="compType">
        <px-select v-model="formValue.compType" class="w-full" placeholder="请选择" maxlength="50">
          <px-option v-for="item in compTypeList" :key="item.value" :label="item.label" :value="item.value" />
        </px-select>
      </px-form-item>
      <px-form-item v-if="formValue.isChild === 1" label="子组件类型" prop="childrenType">
        <px-select v-model="formValue.childrenType" class="w-full" placeholder="请选择" maxlength="50">
          <px-option v-for="item in childrenTypeList" :key="item.value" :label="item.label" :value="item.value" />
        </px-select>
      </px-form-item>
      <px-form-item label="科室" prop="className">
        <px-select v-model="formValue.className" class="w-full" maxlength="50" placeholder="请选择" clearable>
          <px-option v-for="item in classNameList" :key="item.value" :label="item.name" :value="item.value" />
        </px-select>
      </px-form-item>
      <px-form-item label="组件别名" prop="aliasName">
        <px-select v-model="formValue.aliasName" class="w-full" maxlength="50" placeholder="请选择" clearable>
          <px-option v-for="item in aliasNameList" :key="item.value" :label="item.label" :value="item.value" />
        </px-select>
      </px-form-item>
      <px-form-item label="扩展字段" prop="ext1">
        <px-input v-model="formValue.ext1" placeholder="请输入" maxlength="50" clearable />
      </px-form-item>
      <px-form-item label="产品定义组件名" prop="frontComponent">
        <px-select v-model="formValue.frontComponent" class="w-full" placeholder="请选择" clearable>
          <px-option v-for="item in componentOptions" :key="item.value" :label="item.label" :value="item.value" />
        </px-select>
      </px-form-item>
    </px-form>
    <div class="equip-dialog-footer">
      <px-button @click="closeDialog">取消</px-button>
      <px-button type="primary" @click="handleSubmit(formRef)">保存</px-button>
    </div>
  </px-dialog>
</template>
<script setup lang="ts">
import { PxMessage } from "px-ui";
import { ref, reactive, toRefs, computed, watch, onMounted } from "vue";

import { save } from "@/api/visual/module";
import { queryDictData } from "@/api/common";
import { componentOptions } from "@/views/all/visual/assets/componentMap";

// 调用父级-关闭弹窗、查询列表方法
const emits = defineEmits(["closeDialog", "queryTable", "queryTreeRight"]);
// 父级传过来的值
const props = defineProps({
  // 控制弹窗显示隐藏
  TreedialogVisible: {
    type: Boolean,
    default: false
  },
  // 弹窗类型 add 新增 edit 编辑
  dialogType: {
    type: String,
    default() {
      return "add";
    }
  },
  // 表单数据
  dialogRow: {
    type: Object || Number,
    default() {
      return {};
    }
  },
  twinId: {
    type: String,
    default: ""
  },
  //判断是点击的是子组件还是组件
  parentNo: {
    type: String,
    default: ""
  },
  rightData: {
    //中间树数据
    type: Object,
    default() {
      return {};
    }
  },
  treeDataRight: {
    type: Array,
    default() {
      return [];
    }
  }
});
const filterTreeData = computed(() => {
  console.log(excludeMatchingObjects(props.treeDataRight, "componentNo", props.rightData.componentNo));
  return excludeMatchingObjects(props.treeDataRight, "componentNo", props.rightData.componentNo);
});

const TreedialogVisible = computed(() => props.TreedialogVisible);
// 页面本身的值
const formRef = ref();
const state = reactive<any>({
  typeTitle: "新增",
  formValue: {
    compType: 1,
    parentNo: "",
    isVisualization: 1,
    isChild: 0
  },
  //是否子组件
  isChildList: [
    { label: "是", value: 1 },
    { label: "否", value: 0 }
  ],
  //组件类型
  compTypeList: [
    { label: "普通组件", value: 1 },
    { label: "点位数据列表", value: 2 },
    { label: "饼状图", value: 3 },
    { label: "业务列表", value: 4 }
  ],
  //子组件类型
  childrenTypeList: [
    { label: "组件", value: 1 },
    { label: "数据列表", value: 2 }
  ],
  //科室
  classNameList: [],
  aliasNameList: [
    { label: "当日设备维护统计", value: "EQP_STAT" },
    { label: "报警列表", value: "ALARM" },
    { label: "报警数量统计", value: "ALARM_COUNT_STAT" },
    { label: "报警统计", value: "ALARM_STAT" },
    { label: "侦测器信息汇总", value: "DETECTOR" },
    { label: "设备状态统计", value: "EQP_STATUS_STAT" },
    { label: "废气监测", value: "EMISSION_MONITORING" },
    { label: "综合监测", value: "INTEGRATED_MONITORING" }
  ]
});
const { formValue, typeTitle, isChildList, compTypeList, childrenTypeList, classNameList, aliasNameList } = toRefs(state);
// 表单校验规则
const rules = computed(() => ({
  name: [{ required: true, message: "类型名称不能为空", trigger: ["blur", "change"] }]
}));

// 打开弹窗
const openDialog = async () => {
  formRef.value.resetFields();
  getClassNameSelect();
  //判断是点击的是子组件还是组件
  if (props.dialogRow === 0) {
    formValue.value.isChild = 0;
  } else {
    formValue.value.isChild = 1;
  }
  formValue.value.twinId = props.twinId;
  if (props.dialogType === "add") {
    typeTitle.value = "新增";
  } else if (props.dialogType === "edit") {
    typeTitle.value = "编辑";
    formValue.value = props.dialogRow;
  }
};
// 获取科室下拉框数据
const getClassNameSelect = async () => {
  const classNameData = await queryDictData({ typeCode: "className" });
  classNameList.value = [...classNameData];
};
// 关闭弹窗
const closeDialog = () => {
  formValue.value = {
    parentNo: ""
  };
  emits("closeDialog");
};
// 提交
const handleSubmit = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async valid => {
    if (valid) {
      if (props.dialogType === "add") {
        const params = formValue.value;
        if (formValue.value.isChild == 1) {
          formValue.value.parentNo = props.rightData.componentNo;
        } else {
          formValue.value.parentNo = "";
        }
        await save(params);
        PxMessage.success("新增成功");
        emits("closeDialog");
        emits("queryTreeRight");
      } else if (props.dialogType === "edit") {
        const params = formValue.value;
        // formValue.value.uniqueName = "";
        if (formValue.value.isChild !== 1) {
          formValue.value.parentNo = "";
        }
        await save(params);
        PxMessage.success("编辑成功");
        emits("closeDialog");
        emits("queryTreeRight");
      }
    }
  });
};
function excludeMatchingObjects(array, key, value) {
  // 定义递归函数来过滤数组
  const filterRecursive = items => {
    return items.reduce((acc, item) => {
      // 如果当前项的指定键的值等于给定值，则排除该项
      if (item[key] === value) {
        return acc; // 不添加到结果数组中
      }
      // 如果当前项有children属性，递归过滤子数组
      if (item.children && Array.isArray(item.children)) {
        item.children = filterRecursive(item.children); // 更新当前项的children
      }
      // 添加当前项到结果数组中
      acc.push(item);
      return acc;
    }, []);
  };

  // 调用递归函数并返回结果
  return filterRecursive(array);
}
</script>
<style lang="scss" scoped>
.equip-dialog {
  .equip-dialog-footer {
    margin-top: 108px;
    text-align: right;
  }
}
</style>
